<template>
<div>
	<div id="number-cover" v-show="dataShow"></div>
	<div id="number-wrap"
		 v-el:number-wrap
		 
		 class="number-input-transition" 
		 :class="{'number-input-leave':!dataShow,'number-input-enter':dataShow}" >

		<div class="number-top-bar row middle-xs ">
			<div class="col-xs-1 discount-flag text-center" :class="{'visibility-hiden':!dataDiscountShow}">-</div>
			<div class="col-xs-6 number-result start-xs">
				<span class="number-result-span">{{dataValue}}</span>
			</div>
			<div class="col-xs-1">
				<span class="close" @click="allClear()"></span>
			</div>
			<!-- <div class="col-xs-1 voice-border">
				<span class="voice"></span>
			</div> -->
			<button class="col-xs-3 discount"
					:disabled="discountDisabled"
					:class="{'disabled':discountDisabled,'active':!dataDiscountShow}"
					@click="discountFn">{{discountText}}</button>
		</div>
		<ul class="row margin-no tap-group">
			<!-- <li class="col-xs-3 padding-no text-center" @click="tapNumber('7')">
				<button>7</button>
			</li> -->
			<!-- <li class="col-xs-3 text-center" @click="tapNumber('7')">7</li> -->
			<li class="col-xs-3 text-center number-tap" data-value='7'>7</li>
			<li class="col-xs-3 text-center number-tap" data-value='8'>8</li>
			<li class="col-xs-3 text-center number-tap" data-value='9'>9</li>
			<li class="col-xs-3 text-center spcial-num back-space-contain delete-tap">
				<span class="back-space"></span>
			</li>
			<li class="col-xs-3 text-center number-tap" data-value='4'>4</li>
			<li class="col-xs-3 text-center number-tap" data-value='5'>5</li>
			<li class="col-xs-3 text-center number-tap" data-value='6'>6</li>
			<li class="col-xs-3 text-center spcial-num ac-tap">AC</li>
			<li class="col-xs-3 text-center number-tap" data-value='1'>1</li>
			<li class="col-xs-3 text-center number-tap" data-value='2'>2</li>
			<li class="col-xs-3 text-center number-tap" data-value='3'>3</li>
			<li class="col-xs-3 text-center spcial-num number-tap" data-value='%'>%</li>
			<li class="col-xs-3 text-center number-tap" data-value='0'>0</li>
			<li class="col-xs-3 text-center number-tap" data-value='00'>00</li>
			<li class="col-xs-3 text-center number-tap" data-value='000'>000</li>
			<li class="col-xs-3 text-center spcial-num ok-tap">OK</li>
		</ul>
	</div>
</div>
</template>
<script>
	export default{
		props: {
			dataValue:{
				type:String,
				default:'',
			},
			//组件所关联输入框控件名称，必须
			dataName:{
				type:String,
				default:''
			},
			dataShow: {
				type: Boolean,
				default: false
			},
			dataMax: {
				default: 13
			},
			dataDiscountShow:{
				type: Boolean,
				default:false
			},
			discountDisabled:{
				type: Boolean,
				default:false,
			},
			clearOnce:{
				type: Boolean,
				default : false,
			}
		},
		data(){
			return{
				discountText:'Discount'
			}
		},
		watch:{
			'dataDiscountShow':function(n,o){
				console.log(n,o)
			},
			'dataShow':function(n,o){
				if(n){
					if(this.dataValue == 0) this.dataValue = '';

					//do scrollup
					/********
					*键盘启用时，页面滚动到合适位置,并加上class名active
					* *****/
					let dom = $('#'+this.dataName+'-number_input');
					if(dom.length>0){
						dom.removeClass('notouched');
						dom.addClass('active');

						$('body').addClass('padding-number_input');

						let offsetTop = dom.offset().top;
						//键盘高度
						let number_inputHeight = 200;

						let height = window.screen.height - number_inputHeight;

						let scrollTop = offsetTop - height + 100;

						$('html, body').animate({
		                    scrollTop: scrollTop
		                }, 500);
					}
				}else{
					//do scroll back
				}
			},
			'discountDisabled':function(){
				console.log('change')
			}
		},
		methods: {
			hide(){
				let dom = $('#'+this.dataName+'-number_input');
				if(dom.length>0){
					dom.removeClass('active');
					$('body').removeClass('padding-number_input');
				}

				let cntrName = this.dataName;

				this.$set("dataShow",false);
				this.$nextTick(()=>{
					this.$set('dataDiscountShow',false);
				});
				/*if(this.dataDiscountShow){
					this.discountDone(cntrName);
				}else{
					this.hideDone(cntrName);
				}*/
				this.hideDone(cntrName);

			},
			tapNumber(num){console.log(this.clearOnce)
				if(this.clearOnce){
					this.dataValue = ''; 
					this.clearOnce = false;
				}
				let oldValue = this.dataValue,
					cntrName = this.dataName;

				let newValue = (oldValue + num);
				//如果用户输入了两次%%，return
				if(newValue.match(/%{2,}/) != null) return

				//如果超过位数最大限制
				if(this.dataMax <= newValue.length) return;
				this.$set('dataValue',newValue);

				this.workDone(cntrName,newValue);
			},
			deleteNum(){
				let newValue = this.dataValue.toString(),
					cntrName = this.dataName;

				let len = newValue.length;

				if(len <= 0) return;

				newValue = newValue.substr(0,len*1-1);

				this.$set('dataValue',newValue);

				this.workDone(cntrName,newValue);
			},
			/*
			*计算器上的AC
			*全部清空
			 */
			allClear(){
				let newValue = '',
					cntrName = this.dataName;

				this.$set('dataValue',newValue);

				this.workDone(cntrName,newValue);
			},
			/**
			 * 输入数字回调函数
			 * @param  {String} cntlName [关联输入框的名称]
			 * @param  {String} newVal   [数值]
			 */
			workDone(cntlName,newVal){

			},
			/**
			 * 隐藏回调
			 */
			hideDone(cntrName){

			},
			/**
			 * 折扣模式下的回调
			 */
			discountDone(cntrName){

			},
			discountFn(){
				this.dataDiscountShow = !this.dataDiscountShow;
			}
		},
		ready(){
			let self = this;
			$(document).on('click','#number-cover',function(e){
				self.hide();
			});

			$(document).on('touchstart.my','#number-wrap .tap-group .number-tap',function(e){
				self.tapNumber($(this).data('value'));
			});
			$(document).on('touchstart.my','#number-wrap .tap-group .ok-tap',function(e){
				self.hide();
			});
			$(document).on('touchstart.my','#number-wrap .tap-group .ac-tap',function(e){
				self.allClear();
			});
			$(document).on('touchstart.my','#number-wrap .tap-group .delete-tap',function(e){
				self.deleteNum();
			});
		},
		destoryed(){
			$('body').removeClass('padding-number_input');
			$(document).off('touchstart.my');

		}
	}
</script>
<style lang="sass">
@import '../../public/css/common';
#number-cover{
	position:fixed;
	top: 0;
	right: 0;
	width: 100%;
	height:100%;
	z-index: 98;
}
#number-wrap{
	box-shadow: 0 0px 50px 0px gray;
	z-index:99;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	font-size: 1.5rem;
	overflow: hidden;
	//display: none;
	.row{
		border-right: 0;
	}
	li{
		background:#fff;
		color: black;
		font-size: 1.3rem;/*
		button{
			background: #fff;
			width: 100%;
			height:100%;
			border:none;
			&:active{
				background:#808080;
			}
		} */
		&:before{
			@include setBottomLine(#DCDCDC)
		}
		&:after{
			@include setRightLine(#DCDCDC)
		}
	}
	.col-xs-3{
		height: 50px;
		line-height: 50px;
		position:relative;
	}
	li.spcial-num{
		background:#F5F5F5;
		font-size: 1.3rem;
	}
	.back-space{
		background:url('../../public/images/backSpace.png') no-repeat;
		background-size:contain;
		height:.85rem;
		width:1.4rem;
		display: inline-block;
   		margin-top: 13px;
	}
	.number-result{
		text-align: left;
		line-height:50px;
		font-size:70%;
		.number-result-span{
			text-align: left;
			display:inline-block;
			position:relative;
			height:23px;
			line-height:23px;
			/* &:after{
				position:absolute;
				top: 0;
				right: -6px;
				display:table;
				content: '';
				width:2px;
				background:transparent;
				height:23px;
				animation-name:flash;
				animation-duration: 1s;
				animation-iteration-count:infinite; 
			} */
		}
	}
	.discount-flag{
		line-height:50px;
		color:#01abee;
	}
	.number-top-bar{
		border-bottom:1px solid #DCDCDC;
		border-top:1px solid #DCDCDC;
		[class^="col-xs-"]{
		    padding-left:0;
		    padding-right:0;
		  }
		.close{
			display:inline-block;
			background: url("../../public/images/ico_close_gray@2x.png");
			background-size:.85rem .85rem;
			width: .85rem;
			height:.85rem;
		}
		.voice{
			display:inline-block;
			background:url("../../public/images/ico_record@2x.png") no-repeat;
			background-size:contain;
			width: .55rem;
			height:torem(37px);
		}
		.voice-border{
			border-right:1px solid #DFDFDF;
			border-left:1px solid #DFDFDF;
		}
		.discount{
			border:none;
			background: transparent;
			font-size:.8rem;
			color:gray;
			&.disabled{
				visibility: hidden;
			}
			&.active{
				color:#01abee;
			}
		}
		.number-result {
		}
	}
}
	.number-input-transition{
		transition: all 0.5s;
		height:250px;
		//display:none;
	}
	.number-input-enter{
		display:block;
	  transform:translate3d(0,0,0)
	}
	.number-input-leave {
		transform:translate3d(0,300px,0);
	}

@keyframes flash
{
	from {background:transparent;}
	to {background:#01abee;}
}
</style>
